<script lang="ts" setup>
const { url, lazy } = defineProps({
  url: {
    type: String,
    default: ''
  },
  lazy: {
    type: Boolean,
    default: true
  }
})
</script>

<template>
  <el-image v-once :lazy="lazy" :src="url" class="use-transitions-size size-full" fit="cover">
    <template #error>
      <span class="flex text-4xl bg-teal-500 size-full items-center justify-center">UTOPIA</span>
    </template>
  </el-image>
</template>

<style lang="scss" scoped></style>
